<template>
  <nav class="navbar header">
    <div class="container-md">
      <!-- brand -->
      <a class="navbar-brand" href="#">
        <img :src="require('@/assets/img/svg/logo.svg')" alt="Logo" width="48" height="24" class="d-inline-block align-text-top logo">
        CALMAX TOOLS
      </a>

      <!-- toggler -->
      <button class="navbar-toggler toggler-off-canvas" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- offcanvas -->
      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasNavbarLabel"></h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            <li class="nav-item">
              <a class="nav-link" target="_blank" style="cursor: pointer;" @click="$Jump2('code', false)">Code</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" target="_blank" style="cursor: pointer;" @click="$Jump2('draft', false)">Draft</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" target="_blank" style="cursor: pointer;" @click="$Jump2('home', false)">Home</a>
            </li>
            <li v-for="(nav, idx) in navs" :key="idx" class="nav-item">
              <a class="nav-link" target="_blank" :href="nav.url">{{ nav.title }}</a>
            </li>
          </ul>
          <form class="d-flex mt-3" role="search">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success disabled">Search</button>
          </form>
        </div>
      </div>
    </div>
  </nav>
</template>
<script>
import { TOOLMENUS } from '@/assets/const'
export default {
  name: 'HEADER',
  data () {
    return {
      navs: TOOLMENUS
    }
  }
}
</script>
<style lang="less" scoped>
.header {
  min-width: 375px;
}
</style>
